<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-01 20:09:03
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-04 11:02:54
-->
<template>
    <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
        <el-form :model="form" :rules="rules" ref="form1">

            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                <p v-if="!info.isAdd">留空则不修改</p>
            </el-form-item>


            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                    :inactive-value="2">
                </el-switch>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
            <el-button v-else type="primary" @click="amend">修 改</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { memberInfo, memberEdit } from '@/request/api'
import { successAlert} from '@/utils/alert'
import {mapGetters,mapActions} from 'vuex'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            form: {
                phone: '',
                nickname: '',
                password: '',
                status: 1
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    props: ['info'],
    methods: {
        ...mapActions({
            requestUser:'user1/listActions'
        }),
        getDetail(uid) {
            // console.log(id);
            memberInfo({ uid: uid }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.password = ''
                    // this.form.id = id
                }
            })
        },
        //修改
        amend() { 
            memberEdit(this.form).then(res =>{
                // console.log(res);
                if(res.code === 200){
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //
                    this.requestUser()
                }
            })
        },
        close() {
            this.cancel()
        },
        //取消
        cancel() {
            this.info.isShow = false
            this.form = {
                phone: '',
                nickname: '',
                password: '',
                status: 1
            }
            this.$refs.form1
        },
        //确定
        confirm() { },
        opened() { 
            this.requestUser()
        }
    },

    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>